border#

The border property adds a border around the view using the specified style and optional width. This allows you to visually outline views with solid colors, gradients, or system materials, and support light/dark mode adaptations.

Definition#

1border?: {
2  style: ShapeStyle | DynamicShapeStyle
3  width?: number
4}

• style: Required. Defines the visual appearance of the border. Accepts ShapeStyle or DynamicShapeStyle.
• width: Optional. Specifies the thickness of the border in pixels. Defaults to 1.

Usage Examples#

Basic Solid Color Border#

1<Text
2  border={{
3    style: "systemRed",
4    width: 2
5  }}
6>
7  Bordered Text
8</Text>

Default Width Border (1px)#

1<HStack
2  border={{
3    style: "#000000"
4  }}
5>
6  ...
7</HStack>

Gradient Border#

1<Text
2  border={{
3    style: {
4      gradient: [
5        { color: "red", location: 0 },
6        { color: "blue", location: 1 }
7      ],
8      startPoint: { x: 0, y: 0 },
9      endPoint: { x: 1, y: 1 }
10    },
11    width: 3
12  }}
13>
14  Gradient Border
15</Text>

Dynamic Border Style (Light/Dark Mode)#

1<Text
2  border={{
3    style: {
4      light: "gray",
5      dark: "white"
6    },
7    width: 1.5
8  }}
9>
10  Adaptive Border
11</Text>

Notes#

• The border surrounds the entire view, respecting its layout and frame.
• You can use any ShapeStyle, including material blur styles like "regularMaterial" or "ultraThinMaterial" for a more iOS-native look.